<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			text-decoration: none;
			list-style: none;
			font-family: "微软雅黑"
		}
		.box{
			height: 40px;
			width: 100%;
			background: #070F1C url() 0 0 no-repeat;
		}
		.box .list{
			width: 120px;
			color: #fff;
			line-height: 40px;
			padding: 0px 10px;
			display: inline-block;
			position: relative;
			text-align: center;
		}
		.box .list a{
			color: #fff;
		}
		.son{
			position: absolute;
			top: 40px;
			left: 0px;
			background: #0D1C31 url() 0 0 no-repeat;
			display: none;
		}
		.son a{
			width: 80px;
			padding: 0px 20px;
			display: block;
			color: #fff;
		}

	</style>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">

		$(function  () {
			
			$('#list').hover(function() {
				$(this).children('.son').stop().slideToggle();
			}, function() {
				$(this).children('.son').stop().slideToggle();
			});

		})

	</script>
</head>
<body>
	<div class="box">
		<li href="" class="list">
			<a href="">主页</a>
		</li>
		<li href="" class="list">
			<a href="">HTML+CSS</a>
		</li>
		<li class="list" id="list">
			<a href="">javascript</a>
			<div class="son">
				<a href="">PHP效果</a>
				<a href="">PHP插件</a>
				<a href="">PHP下载</a>
			</div>
		</li>
		<li href="" class="list">
			<a href="">PHP</a>
			<div class="son">
				<a href="">PHP1效果</a>
				<a href="">PHP2插件</a>
				<a href="">PHP3下载</a>
			</div>
		</li>
	</div>
</body>
</html>